<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <title>タブ切替のサンプル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
// <![CDATA[

var tab = {
	init: function(){
		var tabs = this.setup.tabs;
		var pages = this.setup.pages;

		for(i=0; i<pages.length; i++) {
			if(i !== 0) pages[i].style.display = 'none';
			tabs[i].onclick = function(){ tab.showpage(this); return false; };
		}
	},

	showpage: function(obj){
		var tabs = this.setup.tabs;
		var pages = this.setup.pages;
		var num;

		for(num=0; num<tabs.length; num++) {
			if(tabs[num] === obj) break;
		}

		for(var i=0; i<pages.length; i++) {
			if(i == num) {
				pages[num].style.display = 'block';
				tabs[num].className = 'present';
			}
			else{
				pages[i].style.display = 'none';
				tabs[i].className = null;
			}
		}
	}
};

// ]]>
</script>

<style type="text/css">
body {
	color: #333;
	font-family: "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, sans-serif;
	font-size: 62.5%; /* 10px */
	line-height: 1.5;
	text-align: center
}
h1 {font-size: 1.5em;}
p, ul, div {font-size: 1.2em; list-style-type: none;}
#container {
	width: 66.6%;
	margin: 0 auto;
	text-align: left;
}


#tab {
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 1em;
	border-bottom: 2px solid #333;
	height: 1.5em;
	overflow: hidden;
}
#tab li {
	float: left;
	width: 64px;
	height: 1.5em;
}
#tab li a {
	display: block;
	width: 60px;
	height: 1.5em;
	border: 1px solid #ccc;
	border-bottom: 0;

	color: #777;
	text-align: center;
}
#tab li a:hover,
#tab li.present a {
	border-color: #333;
	color: #000;
}


#page1, #page2, #page3, #page4, #page5 {
	margin-bottom: 12em;
	padding-top: 1em;
}

</style>
</head>

<body id=""><div id="container">


<h1>タブ切替のサンプル</h1>

<ul id="tab">
<li class="present"><a href="#page1">Page_1</a></li>
<li><a href="#page2">Page_2</a></li>
<li><a href="#page3">Page_3</a></li>
<li><a href="#page4">Page_4</a></li>
<li><a href="#page5">Page_5</a></li>
</ul>

<div id="page1">11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 </div>
<div id="page2">22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 </div>
<div id="page3">33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 </div>
<div id="page4">44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 </div>
<div id="page5">55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 </div>

<script type="text/javascript">
// <![CDATA[

	tab.setup = {

			tabs: document.getElementById('tab').getElementsByTagName('li'),

			pages: [
					document.getElementById('page1'),
					document.getElementById('page2'),
					document.getElementById('page3'),
					document.getElementById('page4'),
					document.getElementById('page5')
				]
	};

tab.init();


// ]]>
</script>

</div></body>
</html>